*,
*:before,
*:after {
  box-sizing: border-box;
  margin    : 0;
  padding   : 0;
}

html {
  height: 100vh;
}

.container {
  display    : flex;
  flex-flow  : row nowrap;
  align-items: stretch;
  height: 100vh;
}

.container .ctrl {
  flex            : 480px 0 0;
  padding         : 1em;
  background-color: #3b4393;
  color           : #fff;
  height          : 100%;
}

.container .ctrl h1 {
  text-align: center;
}

.container .ctrl .row {
  padding      : 0.5em;
  border-bottom: 1px dashed rgba(255, 255, 255, .5);
}

.container .ctrl label {
  display: inline-block;
  width  : 10em;
  line-height: 2em;
}

.container .ctrl input,
.container .ctrl select {
  position: relative;
  display: inline-block;
  width  : 18em;
  height: 2em;
}

.container .ctrl input[type=range]{
  top: 0.6em;
}
.container .ctrl input[type=radio]{
  margin: 0 1em;
  width: 1em;
  top: 0.6em;
}

.container .prev {
  flex   : 600px 3 1;
  padding: 1em;
}